<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .choose-image {
            width: 100px;
            height: 100px;
            background-color:#ccc;
            position: relative;
        }
        .choose-image input[type='file'] {
            width: 100px;
            height: 100px;
            background-color: red;
            appearance: transparent;
            opacity: 0;
            font-size: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>

    <div class="choose-image">
        <!-- 选择图片 -->
        <input type="file" name="" id="">
    </div>

    <script>
        // 要求：
            // 判断选择的文件格式 

        // 获取Input标签
        var file = document.querySelector("input[type='file']");

        // 绑定事件 onchange
        file.onchange = function(evt){
            // console.log(this.value);// C:\fakepath\example.jpg
            // console.log(evt.path[0].files);
            // console.log(evt.target.files);
            // 获取图片信息
            // 第1个0是数组的索引值
            // 第2个0是对象的键
            var info = evt.path[0].files[0];
            // console.log(info);
            // 图片名称
            var fileName = info.name;
            // console.log(fileName);
            // 图片大小
            // 1kb = 1024 bit 
            // 1mb = 1024 kb
            // var fileSize = info.size;

            // 判断选择的文件是否为图片格式
            if(/\.(jpe?g|png|gif|bmp)/i.test(fileName)){
                console.log("正确图片格式");
            }else {
                console.log("错误图片格式");
            }
        }
    </script>
</body>
</html>